import React from 'react';
import Video from 'react-native-video';
import VideoPause from '../public/icons/videoPause';
import {Box, IconButton, Slider} from 'native-base';

const VideoPlayer = props => {
  const [pause, setPause] = React.useState(true);
  const [sliderValue, setSliderValue] = React.useState(0);
  const [duration, setDuration] = React.useState(0);
  return (
    <Box style={{borderRadius: 10, borderWidth: 1}}>
      <Video
        // Can be a URL or a local file.
        source={{uri: props.src}}
        // Store reference
        ref={ref => (this.Video = ref)}
        style={{width: props.width, height: props.height, borderRadius: 10}}
        onLoad={({duration}) => {this.Video.seek(1),setDuration(duration);}}
        paused={pause}
        onProgress={({currentTime}) => {
          setSliderValue(currentTime);
        }}
      />
      <Box
        style={{
          paddingLeft:5,
          display: 'flex',
          flexDirection: 'row',
          justifyContent: 'flex-start',
          alignItems: 'center',
          height: 30,
          width: '100%',
        }}>
        <IconButton
          icon={<VideoPause pause={pause}></VideoPause>}
          style={{height: 30, width: 30,marginRight:10}}
          onPress={() => {
            setPause(!pause);
          }}></IconButton>
        <Slider
          defaultValue={0}
          minValue={0}
          maxValue={duration}
          colorScheme="red"
          onChange={v => {
            this.Video.seek(v);
            setSliderValue(v);
          }}
          value={sliderValue}
          style={{width: '80%'}}
          step={1}>
          <Slider.Track>
            <Slider.FilledTrack />
          </Slider.Track>
          <Slider.Thumb />
        </Slider>
      </Box>
    </Box>
  );
};
export default VideoPlayer;
